<template>
    <TabGrayEasyCard :title="'出租分析'" :secondTitle="{text: props.title ? `（${props.title}）` : ''}" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
        :unitText="``" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">

        <slot>
            <el-table :data="card.tableData" height="100%">
                <el-table-column prop="buildingFloor" :label="tableLabel" :align="'left'" />
                <el-table-column label="租赁面积" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.netLeaseArea) }}
                    </template>
                </el-table-column>
                <el-table-column :label="`${card.curTab == '出租' ? '出租率' : '>30天'}`" :align="'right'">
                    <template #default="scope">
                        <!-- {{ scope.row.rentRate == '-' ? scope.row.rentRate : scope.row.rentRate + '%' }} -->
                        {{ card.curTab == '出租' ? scope.row.rentRate : toThousands(scope.row.rentRate) }}
                    </template>
                </el-table-column>
                <el-table-column :label="`${card.curTab == '出租' ? '起租率' : '>90天'}`" :align="'right'">
                    <template #default="scope">
                        <!-- {{ scope.row.startingRate == '-' ? scope.row.startingRate : scope.row.startingRate + '%' }} -->
                        {{ card.curTab == '出租' ? scope.row.startingRate : toThousands(scope.row.startingRate) }}
                    </template>
                </el-table-column>
                <el-table-column :label="`${card.curTab == '出租' ? '空置面积' : '>180天'}`" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.vacantArea) }}
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import { toThousands } from '@/utils/number-util'
import dashBoardApi from '@/api/Manage/Business/dashBoard'
import { ref, reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute().query

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    },
    title: {
        type: String,
        required: false,
        default: ''
    },
})
const card = reactive(
    {
        tabs: [{ label: '出租', value: '出租' }, { label: '空置', value: '空置' }],
        curTab: '出租',
        tabRight: '',
        grayCardList: [{ label: '出租率', value: '', unit: '%', color: '', des: '' }, { label: '起租率', value: '', unit: '%', color: '', des: '' }, { label: '空置面积', value: '', unit: '㎡', color: '', des: '' }],
        unitText: '',
        updateText: '',
        tableData: [],
    }
)
const getCardData = () => {
    dashBoardApi.rentOutCardApi({ biProjectCode: props.biProjectCode, dataType: card.curTab, dataTime: props.updateDate }).then((res) => {
        if (res.data.code == 200) {
            if (card.curTab == '出租') {
                card.grayCardList[0].value = res.data.data.rentalRate
                card.grayCardList[0].color = res.data.data.rentalColorLab
                card.grayCardList[1].value = res.data.data.startingRate
                card.grayCardList[1].color = res.data.data.startingColorLab
                card.grayCardList[2].value = toThousands(res.data.data.vacantArea)
            } else {
                card.grayCardList[0].value = toThousands(res.data.data.rentalRate)
                card.grayCardList[1].value = toThousands(res.data.data.startingRate)
                card.grayCardList[2].value = toThousands(res.data.data.vacantArea)
            }
            card.tabRight = res.data.data.timeLab
            card.unitText = res.data.data.valueUnit
        }
    }).catch(err => {
        console.log(err)
    });
}
const getChartData = () => {
    dashBoardApi.rentOutCardListApi({ biProjectCode: props.biProjectCode, dataType: card.curTab, dataTime: props.updateDate }).then((res) => {
        if (res.data.code == 200) {
            card.tableData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
    if (card.curTab == '出租') {
        router.push({
            path: '/page/routeController/index',
            query: {
                rid: 'Manage/Business/rentalSituation/rentalDetail',
                rTitle: '出租分析-商铺',
                tabPermi: route.tabPermi,
                biProjectCode: props.biProjectCode,
                updateDate: props.updateDate,
            },
        })
    }
    if (card.curTab == '空置') {
        router.push({
            path: '/page/routeController/index',
            query: {
                rid: 'Manage/Business/rentalSituation/vacancyDetail',
                rTitle: '出租分析-商铺空置',
                tabPermi: route.tabPermi,
                biProjectCode: props.biProjectCode,
                updateDate: props.updateDate,
            },
        })
    }

}
const changeTab = (value) => {
    card.curTab = value
    if (value == '出租') {
        card.grayCardList = [{ label: '出租率', value: '', unit: '%', color: '', des: '' }, { label: '起租率', value: '', unit: '%', color: '', des: '' }, { label: '空置面积', value: '', unit: '㎡', color: '', des: '' }]
    }
    if (value == '空置') {
        card.grayCardList = [{ label: '>30天', value: '', unit: '㎡', color: '', des: '' }, { label: '>90天', value: '', unit: '㎡', color: '', des: '' }, { label: '>180天', value: '', unit: '㎡', color: '', des: '' }]
    }
    getCardData()
    getChartData()
}

let tableLabel = ref('楼层')
const getBuilding = () => {
    dashBoardApi.isBuildingsApi({ biProjectCode: props.biProjectCode }).then((res) => {
        if (res.code == 200) {
            tableLabel.value = res.data ? '楼栋' : '楼层'
        }
    }).catch(err => {
        console.log(err)
    });
}
getBuilding()
getCardData()
getChartData()

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    getBuilding()
    getCardData()
    getChartData()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
